<template>
  <div class="welcome">
    <div class="content">
      <div class="sub-title">欢迎体验</div>
      <div class="title">{{indexInfo.platformName}}</div>
      <div class="desc">{{indexInfo.platformVersion}}</div>
      <div class="desc">
        <el-button type="success" class="btn-login" @click="applyPermission">申请相关权限</el-button>
      </div>
    </div>
    <div class="video"  v-show="showVideo">
      <video id="playVideo" width="700" controls controlsList="nodownload">
        您的浏览器不支持 HTML5 video 标签。
      </video>
      <div class="desc">视频版权所有，禁止转载</div>
    </div>
  </div>
</template>

<script>
export default {
  name:'welcome',
  data(){
    return{
      showVideo : true,
      indexInfo :{}
    }
  },
  mounted(){
    this.getVideoUrl();
    this.isMobileDevice();
  },
  methods:{
    async getVideoUrl(){
      try{
        let playVideo = document.getElementById("playVideo")
        playVideo.oncontextmenu = function(){return false}
        this.indexInfo = await this.$api.getIndexInfo();
        playVideo.src = this.indexInfo.videoUrl;
      }catch(error){
        console.error(error);
      }
    },
    async applyPermission(){
      try{
        const msg = await this.$api.applyPermission();
        this.$message.success("已发送权限申请");
      }catch(error){
        console.error(error);
      }
    },
    //判断当前设备是否为移动端
    isMobileDevice() {
      const ua = navigator.userAgent.toLowerCase();
      const t1 = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(ua);
      const t2 = !ua.match("iphone") && navigator.maxTouchPoints > 1;
      this.showVideo = !(t1 || t2);
    },
  }
}
</script>

<style lang="scss">
  .welcome {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #fff;
    .content {
      position: relative;
      bottom: 40px;
      .sub-title {
        font-size: 30px;
        line-height: 42px;
        color: #333;
      }
      .title {
        font-size: 40px;
        line-height: 62px;
        color: #409eff;
      }
      .desc {
        text-align: right;
        font-size: 14px;
        color: #999;
        line-height: 42px;
      }
    }
    .video {
      margin-left: 130px;
      width: 750px;
      height: 380px;
      .desc {
        margin-top: 10px;
        text-align: left;
        font-size: 14px;
        color: #999;
      }
    }
  }
</style>
